<template>

	<view class="message-container with-tabbar">
		<u-navbar :bgColor="bgColor" :safeAreaInsetTop="true" :placeholder="true" :fixed="true">
			<view class="u-nav-slot flex-center" slot="left">
				<div class="title   flex align-baseline" style="width: 100vw;">
					<div @click="tabClick(0)" :class="tabIndex === 0 ? 'font-bold fontS36' : ''">聊天</div>
					<div @click="tabClick(1)" class="ml-30" :class="tabIndex === 1 ? 'font-bold' : ''">消息</div>
				</div>
			</view>
		</u-navbar>

		<view class="message-list" v-if="tabIndex === 0">
			<!-- 消息项示例 -->
			<view class="message-item" v-for="item in list" :key="item.conversationID" @click="handleToChatRoom(item)">
				<image @click.stop="toResume(item)" v-if="item.userProfile.avatar" class="avatar"
					:src="item.userProfile.avatar.indexOf('https://') > -1 ? item.userProfile.avatar : baseUrl + item.userProfile.avatar">
				</image>
				<image v-else class="avatar" src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/头像更换.png"
					@click.stop="toResume(item)">
				</image>
				<view class="message-content">
					<view class="message-top">
						<text class="name">{{ item.userProfile.nick || item.userProfile.userID }}</text>
						<text class="time">{{ parseTime(item.lastMessage.lastTime, '{y}-{m}-{d}') }}</text>
					</view>
					<view class="message-bottom">
						<text class="last-message">{{ item.lastMessage.payload.data.messageInfo }}</text>
					</view>
				</view>
			</view>
			<without v-if="list.length < 1 && listLoad"></without>
		</view>
		<view class="message-list" v-if="tabIndex === 1">
			<!-- 消息项示例 -->
			<view class="message-item" v-for="(item, index) in orderList" :key="index" @click="goDetail(item)">

				<div class="avatar bg-green " v-if="item.typeName === '订单'">
					{{ item.typeName }}
					<div class="avatarTip" v-if="item.isRead === 0"></div>
				</div>
				<div class="avatar bg-green " v-else>
					<div class="flex-center justify-center avatar bg-blue">
						<image class="img-75" src="https://xingangtong.oss-cn-beijing.aliyuncs.com/common/消息.png">
						</image>
						<div class="avatarTip" v-if="item.isRead === 0"></div>
					</div>
				</div>
				<view class="message-content">
					<view class="message-top">
						<text class="name fontE1" style="width:calc(100% - 150upx)">{{ item.title }}</text>
						<text class="time">{{ item.showTime }}</text>
					</view>
					<view class="message-bottom">
						<text class="last-message fontE1">{{ item.content }}</text>
						<div class="fontS24 color-green" v-if="item.type === 2">查看{{ item.typeName }}</div>

					</view>
				</view>
			</view>
			<without v-if="orderList.length < 1 && orderLoad"></without>
		</view>


		<bottom-tab-bar-com v-if="userInfo.userType === '03'" :tabIndexs="tabNum" :unRead="unRead" />
		<bottom-tab-bar v-else :tabIndexs="tabNum" :unRead="unRead" />
	</view>
</template>

<script>
import { parseTime } from '@/utils/index.js'
import { getMessage, readMessage, unReadCount } from '@/api/message'
import { pcResumeDetail } from '@/api/resume'

export default {

	data() {
		return {
			orderLoad: false,
			unRead: 0,
			bgColor: 'transparent',
			parseTime,
			tabNum: 2,
			tabIndex: 0,
			baseUrl: getApp().globalData.baseUrl,
			list: [],
			param: {
				orderKey: '',
				userId: '',
				userType: ''
			},
			orderList: [],
			custom: null,
			height: 0,
			listLoad: false
		}
	},
	computed: {
		userInfo() {
			return this.$store.getters.userInfo || {};
		},
	},
	onPageScroll(e) {
		if (e.scrollTop > 1) {
			this.bgColor = '#fff'
		} else {
			this.bgColor = 'transparent'
		}

	},
	onLoad() {
		getApp().globalData.messageRefresh = false;
		this.custom = wx.getMenuButtonBoundingClientRect()
		this.height = uni.upx2px(180)

	},
	async onShow() {
		this.list = [];
		this.listLoad = false


		this.param.userId = this.userInfo.userId;
		this.param.userType = this.userInfo.userType;

		if (this.userInfo.userType === '03') {
			this.tabNum = 3
		} else {
			this.tabNum = 2
		}
		if (this.userInfo.userType && getApp().globalData.messageRefresh) {
			await this.getList()


		}
		if (this.userInfo.userType) {
			await this.getUnReadCount()
		}
		setTimeout(() => {
			this.$chat?.getConversationList().then((list) => {
				console.log('list ====>', list);
				list.forEach(item => {

					if (item.lastMessage && item.lastMessage.payload.data) {

						if (typeof item.lastMessage.payload.data === "string") {
							item.lastMessage.payload.data = JSON.parse(item.lastMessage.payload.data);
						}
						// item.lastMessage.payload.data = JSON.parse(item.lastMessage.payload.data)
						if (item.lastMessage.payload.data.type === 'text') {
							item.lastMessage.payload.data.messageInfo = item.lastMessage.payload.data.value.text
						}
						if (item.lastMessage.payload.data.type === 'service') {
							item.lastMessage.payload.data.messageInfo = item.lastMessage.payload.data.value.name
						}
						if (item.lastMessage.payload.data.type === 'file') {
							item.lastMessage.payload.data.messageInfo = item.lastMessage.payload.data.value.name
						}
						if (item.lastMessage.payload.data.type === 'work') {
							console.log(item.lastMessage.payload.data.type)
							item.lastMessage.payload.data.messageInfo = item.lastMessage.payload.data.value.name
						}

					}

				})

				this.list = list;
				if (this.list.length < 1) {
					this.listLoad = true
				}
			})
		}, 200)
	},
	methods: {
		async goDetail(item) {
			if (item.type === 2) {
				const { data } = await readMessage(item.id)
				uni.navigateTo({
					url: `/pages/order/detail?orderId=${item.relatedId}`
				})
			} else {
				const { data } = await readMessage(item.id)
				uni.navigateTo({
					url: `/pages/message/messageDetail?item=${JSON.stringify(item)}`
				})
			}
		},
		async tabClick(index) {
			this.tabIndex = index
			if (index === 1) {
				await this.getList()
			}
		},
		async getList() {
			this.orderLoad = false
			const { rows } = await getMessage(this.param)
			this.orderList = rows
			this.orderList = [...this.orderList, ...rows]
			if (this.orderList.length < 1) {
				this.orderLoad = true
			}

		},
		async getUnReadCount() {
			const { data } = await unReadCount()
			getApp().globalData.unReadCount = data
			this.unRead = data
		},
		async toResume(item) {

			if (this.userInfo.userType === '03') {

				console.log('跳转简历', item)
				if (item.conversationID.indexOf('_') === -1) {
					const toUserId = item.conversationID.replace(/^C2C/, '');

					uni.navigateTo({
						url: `/pages/chatroom/chatroom?toUserId=${toUserId}&nick=${item.userProfile.nick}&type=kefu`
					})
				} else {
					const toUserId = item.conversationID.split('_');
					const {
						data
					} = await pcResumeDetail(toUserId[1])
					if (data) {
						uni.navigateTo({
							url: `/pages/position/resume?userId=${toUserId[1]}`
						})
					} else {
						uni.showToast({ title: '对方尚未添加在线简历', icon: 'none' })
					}


				}
			}

		},
		handleToChatRoom(item) {
			const toUserId = item.conversationID.replace(/^C2C/, '');
			console.log('item---->', toUserId, item);
			if (item.conversationID.indexOf('_') === -1) {
				uni.navigateTo({
					url: `/pages/chatroom/chatroom?toUserId=${toUserId}&nick=${item.userProfile.nick}&type=kefu`
				})
			} else {
				console.log('position')
				uni.navigateTo({
					url: `/pages/chatroom/chatroom?toUserId=${toUserId}&nick=${item.userProfile.nick}&position=position`
				})
			}

		}
	}
}
</script>

<style scoped>
.message-container {
	/* 为自定义tabBar留出空间 */
	/* padding: 0 20upx; */
	/* padding-bottom: 150upx; */
	background: linear-gradient(180deg, #dcffed 100upx, #f7f7f7 300upx);
	/* height: 100vh;
	overflow: hidden; */
}

.title {
	font-size: 34upx;

}

.message-list {
	/* padding: 0 30px; */
}

.message-item {
	display: flex;
	padding: 20px 0;
	border-bottom: 1px solid #f0f0f0;
}

.avatar {
	min-width: 104upx;
	max-width: 104upx;
	height: 104upx;
	line-height: 104upx;
	border-radius: 50%;
	text-align: center;
	font-size: 36upx;
	margin-right: 30upx;
	color: #fff;
	position: relative;


}

.avatarTip {
	position: absolute;
	right: 10upx;
	top: 5upx;
	width: 16upx;
	height: 16upx;
	background: red;
	border-radius: 50%;

}

.bg-green {
	background: #39B575 !important;
}

.bg-blue {
	background: #259BEC !important;
}

.message-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}

.message-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.name {
	font-size: 30upx;
	font-weight: 500;
}

.time {
	font-size: 26upx;
	color: #999;
}

.message-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10upx;
}

.last-message {
	font-size: 28upx;
	color: #888;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: calc(100% - 120upx);
}

.unread-badge {
	background-color: #ff5a5f;
	color: #fff;
	min-width: 20px;
	height: 20px;
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 12px;
	padding: 0 6px;
}
</style>
